import 'package:flutter/material.dart';
import 'package:flutter_ability/custom_ui.dart';

class CheckWidget extends StatefulWidget {
  const CheckWidget({Key? key}) : super(key: key);

  @override
  State<CheckWidget> createState() => _CheckWidgetState();
}

class _CheckWidgetState extends State<CheckWidget> {
  bool isChecked1 = false;
  bool isChecked2 = false;
  bool isChecked3 = false;

  bool isChecked4 = false;
  bool isChecked5 = false;

  bool isChecked6 = false;
  bool isChecked7 = false;
  bool isChecked8 = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TextView.text("复选框"),
      ),
      backgroundColor: YJColors.BACKGROUND_COLOR,
      body: Container(
        margin: const EdgeInsets.symmetric(horizontal: 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 20),
              child: TextView.text("垂直多选",
                  fontWeight: FontWeight.w600,
                  fontSize: 18,
                  color: YJColors.BLACK85),
            ),
            Container(
              color: Colors.white,
              padding: const EdgeInsets.only(left: 16, right: 16),
              child: Column(
                children: [
                  buildRow("选项内容一", isChecked1, (value) {
                    setState(() {
                      isChecked1 = value;
                    });
                  }),
                  buildRow("选项内容二", isChecked2, (value) {
                    setState(() {
                      isChecked2 = value;
                    });
                  }),
                  buildRow("选项内容三", isChecked3, (value) {
                    setState(() {
                      isChecked3 = value;
                    });
                  }),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 20),
              child: TextView.text("水平多选框",
                  fontWeight: FontWeight.w600,
                  fontSize: 18,
                  color: YJColors.BLACK85),
            ),
            Container(
              color: Colors.white,
              padding: const EdgeInsets.only(left: 16, right: 16),
              child: Row(
                children: [
                  buildRow("选项内容一", isChecked4, (value) {
                    setState(() {
                      isChecked4 = value;
                    });
                  }),
                  buildRow("选项内容二", isChecked5, (value) {
                    setState(() {
                      isChecked5 = value;
                    });
                  }),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 20),
              child: TextView.text("组件样式",
                  fontWeight: FontWeight.w600,
                  fontSize: 18,
                  color: YJColors.BLACK85),
            ),
            Row(
              children: [
                TextView.text("圆形勾选",
                    fontWeight: FontWeight.w400,
                    fontSize: 16,
                    color: YJColors.BLACK65),
                const SizedBox(width: 50),
                Container(
                  color: Colors.white,
                  padding: const EdgeInsets.only(
                      left: 16, right: 16, top: 9, bottom: 9),
                  child: Row(
                    children: [
                      YJCheckbox(
                        size: YJSize.dp(18),
                        activeBgColor: YJColors.THEME_COLOR,
                        type: YJCheckboxType.circle,
                        onChanged: (value) {
                          setState(() {
                            isChecked6 = value;
                          });
                        },
                        value: isChecked6,
                      ),
                      const SizedBox(width: 10),
                      TextView.text("选项内容一"),
                    ],
                  ),
                )
              ],
            ),
            const SizedBox(height: 20),
            Row(
              children: [
                TextView.text("矩形勾选",
                    fontWeight: FontWeight.w400,
                    fontSize: 16,
                    color: YJColors.BLACK65),
                const SizedBox(width: 50),
                Container(
                  color: Colors.white,
                  padding: const EdgeInsets.only(
                      left: 16, right: 16, top: 9, bottom: 9),
                  child: Row(
                    children: [
                      YJCheckbox(
                        size: YJSize.dp(18),
                        activeBgColor: YJColors.THEME_COLOR,
                        type: YJCheckboxType.basic,
                        onChanged: (value) {
                          setState(() {
                            isChecked7 = value;
                          });
                        },
                        value: isChecked7,
                      ),
                      const SizedBox(width: 10),
                      TextView.text("选项内容一"),
                    ],
                  ),
                ),
              ],
            ),
            const SizedBox(height: 20),
            Row(
              children: [
                TextView.text("勾选       ",
                    fontWeight: FontWeight.w400,
                    fontSize: 16,
                    color: YJColors.BLACK65),
                const SizedBox(width: 50),
                Container(
                  color: Colors.white,
                  padding: const EdgeInsets.only(
                      left: 16, right: 16, top: 9, bottom: 9),
                  child: Row(
                    children: [
                      YJCheckbox(
                        size: YJSize.dp(18),
                        type: YJCheckboxType.basic,
                        activeBgColor: YJColors.TRANSPARENT,
                        activeBorderColor: YJColors.TRANSPARENT,
                        inactiveBorderColor: YJColors.TRANSPARENT,
                        activeIcon: const Icon(
                          Icons.check,
                          size: 18,
                          color: YJColors.WARNING,
                        ),
                        onChanged: (value) {
                          setState(() {
                            isChecked8 = value;
                          });
                        },
                        value: isChecked8,
                      ),
                      const SizedBox(width: 10),
                      TextView.text("选项内容一"),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget buildRow(String text, bool isChecked, ValueChanged<bool>? onChanged) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 9, horizontal: 5),
      child: Row(
        children: [
          YJCheckbox(
            size: YJSize.dp(18),
            activeBgColor: YJColors.THEME_COLOR,
            type: YJCheckboxType.circle,
            onChanged: onChanged,
            value: isChecked,
          ),
          const SizedBox(width: 10),
          TextView.text(text),
        ],
      ),
    );
  }
}
